﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>首页</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1  maximum-scale=1 user-scalable=no"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="HandheldFriendly" content="True" />

    <link rel="stylesheet" href="css/materialize.css" />
    <link
      rel="stylesheet"
      href="https://s2.pstatp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/owl.carousel.css" />
    <link rel="stylesheet" href="css/owl.theme.css" />
    <link rel="stylesheet" href="css/owl.transitions.css" />
    <link rel="stylesheet" href="css/fakeLoader.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="shortcut icon" href="img/favicon.png" />
    <style>
      #sige {
        height: 4rem;
        display: -webkit-flex;
        display: flex;
        /* flex-direction: row; */
        justify-content: space-around;
        align-items: center;
        background-color: #fff;
      }
      .dibuduo {
        font-size: 20px;
        color: #000;
      }
    </style>
  </head>
  <body style="position: relative">
    <!-- navbar top -->
    <div class="navbar-top">
      <div class="side-nav-panel-left">
        <a href="#" data-activates="slide-out-left" class="side-nav-left"
          ><i class="fa fa-bars"></i
        ></a>
      </div>
      <!-- site brand	 -->
      <div class="site-brand">
        <a href="index.html"><h1>律师事务所</h1></a>
      </div>
      <!-- end site brand	 -->
      <div class="side-nav-panel-right">
        <a href="contact.html" class="side-nav-right"
          ><i class="fa fa-envelope-o"></i
        ></a>
      </div>
    </div>
    <!-- end navbar top -->

    <!-- side nav left-->
    <div class="side-nav-panel-left">
      <ul id="slide-out-left" class="side-nav side-nav-panel collapsible">
        <li class="profil">
          <img src="img/profile.jpg" alt="" />
          <h2>XXX</h2>
          <h6>个人签名</h6>
        </li>
        <li class="li-top">
          <a href="./首页.html.html"><i class="fa fa-home"></i>家庭</a>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="fa fa-shopping-cart"></i>律师
            <span><i class="fa fa-caret-down"></i></span>
          </div>
          <div class="collapsible-body">
            <ul class="side-nav-panel">
              <li><a href="shop.html">律师</a></li>
              <li><a href="shop-single.html">律师单</a></li>
              <li><a href="./支付款.html">支付款</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="fa fa-file-o"></i>团队
            <span><i class="fa fa-caret-down"></i></span>
          </div>
          <div class="collapsible-body">
            <ul class="side-nav-panel">
              <li><a href="pricing.html">价格</a></li>
              <li><a href="error404.html">404</a></li>
              <li><a href="team.html">团队</a></li>
              <li><a href="testimonial.html">证明</a></li>
            </ul>
          </div>
        </li>
        <li>
          <div class="collapsible-header">
            <i class="fa fa-bold"></i>博客
            <span><i class="fa fa-caret-down"></i></span>
          </div>
          <div class="collapsible-body">
            <ul class="side-nav-panel">
              <li><a href="./个人博客.html">博客</a></li>
              <li><a href="./个人博客单.html">博客单</a></li>
            </ul>
          </div>
        </li>
        <li>
          <a href="./关于我们.html"><i class="fa fa-user"></i>关于我们</a>
        </li>
        <li>
          <a href="./联系我们.html"><i class="fa fa-envelope-o"></i>联系我们</a>
        </li>
        <li>
          <a href="./登录.html.html"><i class="fa fa-sign-in"></i>登录</a>
        </li>
        <li>
          <a href="./注册.html.html"><i class="fa fa-user-plus"></i>注册</a>
        </li>
      </ul>
    </div>
    <!-- end side nav left-->

    <!-- slider -->
    <div class="slider">
      <ul class="slides">
        <li>
          <img src="img/slide1.jpg" alt="" />
          <div class="caption slider-content center-align">
            <div class="container">
              <h2>欢迎来到...</h2>
              <h4>本事务所，律师品行良好。</h4>
              <button class="button-default">更多</button>
            </div>
          </div>
        </li>
        <li>
          <img src="img/slide2.jpg" alt="" />
          <div class="caption slider-content center-align">
            <div class="container">
              <h2>有多位优秀律师</h2>
              <h4>律师经验丰富。</h4>
              <button class="button-default">更多</button>
            </div>
          </div>
        </li>
        <li>
          <img src="img/slide3.jpg" alt="" />
          <div class="caption slider-content center-align">
            <div class="container">
              <h2>更有一位金牌律师</h2>
              <h4>李鹏律师是我所唯一的金牌律师</h4>
              <button class="button-default">更多</button>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- end slider -->

    <!-- services -->
    <div class="section services">
      <div class="container">
        <div class="row">
          <div class="col s6">
            <i class="fa fa-laptop"></i>
            <h5>Design</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col s6">
            <i class="fa fa-code"></i>
            <h5>Coding</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
        </div>
        <div class="row mb">
          <div class="col s6">
            <i class="fa fa-bar-chart"></i>
            <h5>Marketing</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
          <div class="col s6">
            <i class="fa fa-cogs"></i>
            <h5>Consulting</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end services -->

    <!-- recent work -->
    <div class="section recent-work bg-second">
      <div class="container">
        <div class="section-head">
          <h4>Recent Work</h4>
          <div class="underline"></div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <img src="img/work1.jpg" alt="" />
              <h5><a href="">Mobile App</a></h5>
              <p>Lorem ipsum dolor sit amet consectetur adipiscising elit.</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <img src="img/work2.jpg" alt="" />
              <h5><a href="">Admin App</a></h5>
              <p>Lorem ipsum dolor sit amet consectetur adipiscising elit.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <img src="img/work3.jpg" alt="" />
              <h5><a href="">Mockup</a></h5>
              <p>Lorem ipsum dolor sit amet consectetur adipiscising elit.</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <img src="img/work4.jpg" alt="" />
              <h5><a href="">UI/UX Design</a></h5>
              <p>Lorem ipsum dolor sit amet consectetur adipiscising elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end recent work -->

    <!-- testimonial -->
    <div class="section testimonial testimonial-home">
      <div class="container">
        <div id="owl-testimonial">
          <div class="item">
            <i class="fa fa-quote-left"></i>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
              earum, sapiente repellat facere explicabo magni amet dolore
              aliquam velit quibusdam eaque dolores repellendus sunt id minima
              reiciendis neque cupiditate quo.
            </p>
            <h6>John Doe</h6>
          </div>
          <div class="item">
            <i class="fa fa-quote-left"></i>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
              earum, sapiente repellat facere explicabo magni amet dolore
              aliquam velit quibusdam eaque dolores repellendus sunt id minima
              reiciendis neque cupiditate quo.
            </p>
            <h6>Matt Doe</h6>
          </div>
          <div class="item">
            <i class="fa fa-quote-left"></i>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
              earum, sapiente repellat facere explicabo magni amet dolore
              aliquam velit quibusdam eaque dolores repellendus sunt id minima
              reiciendis neque cupiditate quo.
            </p>
            <h6>Paul Doe</h6>
          </div>
        </div>
      </div>
    </div>
    <!-- end testimonial -->

    <!-- why choose us -->
    <div class="section why-choose-us">
      <div class="container">
        <div class="section-head">
          <h4>Why Choose Us</h4>
          <div class="underline"></div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <i class="fa fa-laptop"></i>
              <h5>Responsive</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <i class="fa fa-code"></i>
              <h5>Clean Code</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <i class="fa fa-diamond"></i>
              <h5>Free Update</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <i class="fa fa-support"></i>
              <h5>Support</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end why choose us -->

    <!-- find us -->
    <div class="section find-us">
      <div class="container">
        <div class="section-head">
          <h4>Find Us</h4>
          <div class="underline"></div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <i class="fa fa-phone"></i>
              <h5>Phone</h5>
              <p>+62000082000</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <i class="fa fa-envelope-o"></i>
              <h5>Email</h5>
              <p>lorem@ipsum.com</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col s6">
            <div class="content">
              <i class="fa fa-skype"></i>
              <h5>Skype ID</h5>
              <p>John_Doe</p>
            </div>
          </div>
          <div class="col s6">
            <div class="content">
              <i class="fa fa-map-marker"></i>
              <h5>Address</h5>
              <p>Navarra, Spain</p>
            </div>
          </div>
        </div>
        <div class="social-media">
          <a href=""><i class="fa fa-facebook"></i></a>
          <a href=""><i class="fa fa-twitter"></i></a>
          <a href=""><i class="fa fa-google"></i></a>
          <a href=""><i class="fa fa-linkedin"></i></a>
          <a href=""><i class="fa fa-instagram"></i></a>
        </div>
      </div>
    </div>
    <!-- end find us -->

    <!-- loader -->
    <div id="fakeLoader"></div>
    <!-- end loader -->

    <!-- footer -->
    <div class="footer">
      <div class="container">
        <div class="copyright">
          <span>© 2017 All Right By </span>
        </div>
      </div>
    </div>
    <div class="stua" style="height: 4rem"></div>
    <div
      id="dibu"
      style="
        width: 100%;
        height: 4rem;
        background: #000;
        position: fixed;
        bottom:0px;
        left: 0;
      "
    >
      <div id="sige">
        <span class="dibuduo">首页</span>
        <span class="dibuduo">名师</span>
        <span class="dibuduo">圈子</span>
        <span class="dibuduo">我的</span>
      </div>
    </div>
    <!-- end footer -->

    <!-- scripts -->
    <script src="js/jquery.min.js"></script>
    <script src="js/materialize.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/fakeLoader.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
